<style lang="less">
@import "../style.less";

.tab-home {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  min-width: 1024px;
  margin-top: 10px;

  .home-bar {
    display: flex;
    height: 300px;
  }

  .info-container {
    height: calc(100% - 300px);
    margin-top: 10px;
  }

  .first-info {
    margin-top: 0px !important;
  }

  .home-info {
    display: flex;
    height: 250px;
    margin-top: 10px;
  }

  .login-pane {
    height: 100%;
    width: 250px;
    background-color: #fffcfb;

    .welcome {
      background-image: url(../../../assets/images/user-title-bg.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      text-align: center;
      padding-top: 10px;
      height: 40px;
    }

    .avatar {
      padding-top: 15px;
      padding-left: 50px;
      width: 60px;
      height: 60px;
    }

    .login-info {
      padding-left: 50px;
      padding-top: 20px;
      font-size: 14px;
      color: #b3b3b3;
    }
  }

  .carousel-pane {
    height: 100%;
    margin-left: 10px;
    width: calc(100% - 260px);
    background-color: #fffcfb;

    .el-carousel {
      height: 100%;
    }

    .el-carousel__container {
      height: 100%;
    }
  }

  .long-pane {
    width: 100%;
    background-color: #fffcfb;
    overflow-x: auto;
  }

  .bar-button {
    cursor: pointer;
    display: inline-block;
    border-radius: 50px;
    font-size: 13px;
    padding: 3px 20px;
    background-color: var(--global-color);
    color: white;
    background: linear-gradient(to bottom right, #f54f00, #fdb64d);
  }

  .class-title {
    padding: 3px 80px 3px 15px;
    font-size: 14px;
  }

  .more {
    padding: 3px 20px 3px 15px;
    font-size: 14px;
    margin-left: auto;
    cursor: pointer;
    color: #b3b3b3;
  }

  .class-btn {
    padding: 3px 20px 3px 20px;
    background-image: url(../../../assets/images/class-btn-unselect.png);
    background-repeat: no-repeat;
    background-size: 15px 80%;
    background-position: center right;
    font-size: 14px;
    cursor: pointer;
  }

  .class-btn-active {
    background-image: url(../../../assets/images/class-btn-select.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: 0px 0px 0px 20px;
    color: white;
  }

  .toolbar {
    display: flex;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
  }

  .cardbar {
    display: flex;
    padding-left: 20px;
  }

  .card {
    position: relative;
    height: 185px;
    width: 190px;
    padding: 0px 10px 0px 10px;

    .card-img {
      border-radius: 15px 15px 18px 18px;
      height: 184px;
      width: 188px;
      border-top: 1px solid #f1f1f1;
      border-left: 1px solid #f1f1f1;
      border-right: 1px solid #f1f1f1;
    }

    .card-info {
      border-radius: 0px 0px 15px 15px;
      height: 60px;
      background-color: #f1f1f1;
      position: absolute;
      bottom: 0px;
      font-size: 13px;
      width: calc(100% - 20px);

      .card-title {
        padding: 8px 10px 0px 10px;
        color: var(--global-color);
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }

      .card-desc {
        padding: 5px 10px 5px 10px;
        color: #868686;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }
}
</style>

<template>
	<div class="tab-home">
		<div class="home-bar">
			<div class="login-pane">
				<div class="welcome">欢迎您登录！</div>
				<div style="display:flex;">
					<img :src="`api${loginUser.userInfo.photoUrl}`" class="avatar" v-if="loginUser.userInfo.photoUrl">
					<img class="avatar" src="../../../assets/images/icons/default-avatar.png" v-else>
					<div style="padding-top:30px;padding-left:30px;">
						<div>{{loginUser.userInfo.username}}</div>
						<div>{{loginUser.userInfo.employeeId}}</div>
					</div>
				</div>
				<div class="login-info">
					<div>
						您本次是
						<span style="color:var(--global-color);">{{loginUser.currentLoginTimes}}</span>次登录
					</div>
					<div style="padding-top:10px;">您上次登录时间:</div>
					<div style="padding-top:10px;">{{loginUser.lastLoginLog.created}}</div>
				</div>
				<div style="display:flex;margin-top:20px;">
					<div style="display:flex;margin-left:auto;margin-right:auto;">
						<div @click="editUser" class="bar-button" style="margin-right:10px;">修改信息</div>
						<div @click="logoutUser" class="bar-button" style="margin-left:10px;">退出登录</div>
					</div>
				</div>
			</div>
			<div class="carousel-pane">
				<el-carousel>
					<el-carousel-item :key="item" v-for="item in carouselItems">
						<img :src="item" height="100%" width="100%">
					</el-carousel-item>
				</el-carousel>
			</div>
		</div>
		<div class="info-container">
			<div class="home-info first-info">
				<div class="long-pane">
					<div class="toolbar">
						<div class="class-title">最新业务</div>
						<div
							:class="{
                                 'class-btn-active': currentBusinessClass === item.name || (index === 0 && !currentBusinessClass),
                                 'class-btn': true
                                }"
							:key="item.name"
							@click="selectBusinessClass(item.name)"
							v-for="(item, index) in lastBusinesses"
						>{{item.name}}</div>
						<div @click="moreInfo('learning')" class="more">更多 ...</div>
					</div>
					<div class="cardbar">
						<div :key="item.name + index" @click="moreInfo('learning')" class="card" v-for="(item, index) in businessByClass">
							<img :src="`api${item.businessImageUrl}`" class="card-img">
							<div class="card-info">
								<div class="card-title">{{item.name}}</div>
								<div class="card-desc">{{item.comment}}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="home-info">
				<div class="long-pane">
					<div class="toolbar">
						<div class="class-title">最新文档</div>
						<div
							:class="{
                                 'class-btn-active': currentDocClass === item.name || (index === 0 && !currentDocClass),
                                 'class-btn': true
                                }"
							:key="item.name"
							@click="selectDocClass(item.name)"
							v-for="(item, index) in lastDocs"
						>{{item.name}}</div>
						<div @click="moreInfo('knowledge')" class="more">更多 ...</div>
					</div>
					<div class="cardbar">
						<div :key="item.name" @click="moreInfo('knowledge')" class="card" v-for="(item) in docsByClass">
							<img :src="`api${item.thumbPic}`" class="card-img">
							<div class="card-info">
								<div class="card-title">{{item.title}}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<dialog-ex :form="form" :init="userInfo" mode="edit" title="修改信息" v-if="dialogModal"/>
	</div>
</template>

<script>
/**
 * 学员主页
 */
import { mapActions, mapGetters, mapMutations } from "vuex";
import { Message } from "element-ui";
import dialogEx from "@/components/dialog/dialogEx";
import api from "@/api";

export default {
  name: "tab-home",
  components: {
    "dialog-ex": dialogEx
  },
  data() {
    return {
      currentBusinessClass: null,
      currentDocClass: null,
      dialogModal: false,
      carouselItems: [
        require("../../../assets/images/test/rolling_1.jpg"),
        require("../../../assets/images/test/rolling_2.jpg")
      ],
      form: {
        items: [
          {
            label: "用户名",
            prop: "username",
            disabled: true,
            name: "input"
          },
          {
            label: "姓名",
            prop: "name",
            disabled: true,
            name: "input"
          },
          {
            label: "重置密码",
            prop: "password",
            name: "input"
          },
          {
            label: "确认密码",
            prop: "confirmPassword",
            name: "input"
          },
          {
            label: "头像",
            prop: "photoUrl",
            name: "icon-upload",
            purpose: "busicover"
          }
        ],
        actions: {
          cancel: () => {
            this.dialogModal = "";
          },
          confirm: (data, mode) => {
            if (
              (!data.confirmPassword && !data.password) ||
              (data.confirmPassword === data.password &&
                data.confirmPassword &&
                data.password)
            ) {
              // 仅更新头像，不更行密码也可以，只更新密码也可以
              let params = {
                employeeId: data.employeeId,
                password: data.password,
                photoUrl: data.photoUrl
              };
              api.updateBySelf({
                loading: true,
                method: "put",
                data: params,
                success: res => {
                  this.loginUser.userInfo.photoUrl = res.photoUrl;
                  this.$store.commit("setLoginUserInfo", this.loginUser);
                }
              });
              // this.updateBySelf(params)
              this.dialogModal = "";
            } else {
              Message.warning({
                center: true,
                message: "请确认密码填写正确"
              });
            }
          }
        }
      }
    };
  },
  created() {
    this.loadData();
  },
  computed: {
    ...mapGetters(["loginUser", "userInfo", "lastBusinesses", "lastDocs"]),
    businessByClass() {
      if (this.lastBusinesses && this.lastBusinesses.length > 0) {
        if (!this.currentBusinessClass)
          return this.lastBusinesses[0].businesses;
        for (let item of this.lastBusinesses) {
          if (item.name === this.currentBusinessClass) {
            return item.businesses;
          }
        }
      }
      return [];
    },
    docsByClass() {
      if (this.lastDocs && this.lastDocs.length > 0) {
        if (!this.currentDocClass)
          return this.lastDocs[0].videos
            ? this.lastDocs[0].videos
            : this.lastDocs[0].documents;
        for (let item of this.lastDocs) {
          if (item.name === this.currentDocClass) {
            return item.videos ? item.videos : item.documents;
          }
        }
      }
      return [];
    }
  },
  methods: {
    ...mapActions([
      "getLastBusinesses",
      "getLastDocs",
      "updateBySelf",
      "logout"
    ]),
    ...mapMutations(["setLoginUserInfo"]),
    loadData() {
      this.getLastBusinesses();
      this.getLastDocs();
    },
    selectBusinessClass(name) {
      this.currentBusinessClass = name;
    },
    selectDocClass(name) {
      this.currentDocClass = name;
    },
    editUser() {
      this.dialogModal = true;
    },
    logoutUser() {
      this.logout({ success: () => this.$router.push({ name: "login" }) });
    },
    moreInfo(tabName) {
      this.$router.push({ path: "traineeHome", query: { tabName } });
    }
  }
};
</script>
